<!DOCTYPE html>
<html>
{% load staticfiles %}
<head>
    <meta charset="utf-8">
    <title>hangge.comm</title>
    <script src="{% static 'js/jquery.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/jquery-migrate-1.2.1.min.js' %}" type="text/javascript"></script>
    <style>
        #container{
            width:380px;
            margin:20px auto;
            padding:15px;
            background-color:#eee;
          border-radius: 15px;
        }
        /** 新增按钮 **/
        #addVar{
            margin:0 0 0 52px;
            padding:5px;
            display:inline-block;
            background-color:#3A9668;
            color:#f1f1f1;
            border:1px solid #005;
            border-radius: 4px;
        }
        /** 删除按钮 **/
        .removeVar{
            margin:auto;
            padding:5px;
            display:inline-block;
            background-color:#B02109;
            color:#f1f1f1;
            border:1px solid #005;
          border-radius: 4px;
        }

        #addVar:hover, .removeVar:hover{
            cursor: pointer;
        }

        .alignRight{
            text-align: right;
        }

        input, textarea{
            padding:5px;
            font-size: 16px;
        }
    </style>
    <script>
        //初始参数个数
        var varCount = 2;

        $(function () {
          //新增按钮点击
            $('#addVar').on('click', function(){
                varCount++;
                $node = '<p>商品名称: '
                    + '<input type="text" name="shop" id="var"> '
                    + '<span class="removeVar">删除</span></p> '
                    + '<p>商品重量: '
                    + '<input type="text" name="weight" id="var"> '
                    + '<span class="removeVar">删除</span></p>';
            //新表单项添加到“新增”按钮前面
                $(this).parent().before($node);
            });

          //删除按钮点击
          $('form').on('click', '.removeVar', function(){
            $(this).parent().remove();
            //varCount--;
          });
        });
    </script>

    <script>

        $(function () {
            $('#submit_btn').on('click', function () {
                sendOrderMsg();
            });
        });


        function sendOrderMsg() {
            let i;
            let commodities = [];
            var token = $('input[name=csrfmiddlewaretoken]').val();
            let a = $('#myForm').serializeArray();
            for (i = 0; i < a.length - 1; i += 2) {
                let o = {};
                o.scrap_name = a[i]['value'];
                o.weight = a[i + 1]['value'];
                commodities.push(o);
                var json = JSON.stringify(commodities);
            }

            $.ajax({
                cache: false,
                type: 'post',
                url: '/order/edit/',
                data: {'order_number': {{ order_num }}, 'commodities': json, 'csrfmiddlewaretoken': token },
                dataType: 'html',
                success: function (data) {
                    $("#allBody").html(data);//刷新整个body页面的html
                }
            });
        }
</script>
</head>
<body id="allBody">
    <div id="container">
      <form id="myForm" method="post">
        <p>
          商品名称:
          <input type="text" name="shop">
          <span class="removeVar">删除</span>
        </p>
        <p>
          商品重量:
          <input type="text" name="weight">
          <span class="removeVar">删除</span>
        </p>
        <p><span id="addVar">新增一项</span></p>
        <p class="alignRight"><input type="button" id="submit_btn" value="提交"></p>
          {% csrf_token %}
      </form>
    </div>
</body>
</html>

